<!-- 确认事项 -->

<template>
  <div>
    <div class="ScheduleTemplate-ModalContent-type">
      <FormSelect :one="children[0]" bind="type" :dict="DICT.TYPE" noLabel disabled />
    </div>

    <draggable v-model="one.event" class="ScheduleTemplate-ModalContent-content" :animation="200" :disabled="isShow">
      <div v-for="item in children" :key="item.key">
        <FormSlot :bind="`${type}_${item.key}`" tip="请输入内容" noLabel required>
          <FormInput :one="item" bind="content" :max="100" @change="toChange(item)" />
        </FormSlot>
      </div>
    </draggable>

    <div v-if="!isShow" class="ScheduleTemplate-ModalContent-btn">
      <FormSlot v-for="(item, i) in children" :key="item.key" noLabel>
        <div class="alignCenter">
          <BtnText v-if="!isShow" icon="el-icon-plus" class="marginRight" @click="addChild(i)" />
          <BtnText v-if="!isShow" :disabled="children.length === 1" icon="el-icon-minus" red @click="delChild(i)" />
        </div>
      </FormSlot>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ContentState from '../ContentState'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ContentEvent',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: ContentState.computed,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: ContentState.methods,
}
</script>
